<script setup lang="ts">
import { addCoachAPI, putCoachAPI } from "@/api/destribute.ts";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useCoachStore } from "@/store/coach.ts";

const upload_coach_avatar_url = import.meta.env.VITE_UPLOAD_COACH_AVATAR
const value1 = ref()
const type = ref(1)
const id = ref('')
const formRef = ref()
const coachStore = useCoachStore()
const dialogVisible = ref(false)
const coachData = reactive({
  name: '',
  age: '',
  avatar: '',
  address: '',
  schedule: {
    start: '',
    end: ''
  },
  phone: '',
  salary: '',
  desc: '',
  scope: ''
})

// 初始函数
const init = (row: any, number: number) => {
  dialogVisible.value = true
  type.value = number
  id.value = ''
  coachData.name = ''
  coachData.age = ''
  coachData.avatar = ''
  coachData.address = ''
  coachData.schedule = {
    end: "",
    start: ""
  }
  coachData.phone = ''
  coachData.salary = ''
  coachData.desc = ''
  coachData.scope = ''
  if (number === 2) {
    id.value = row._id
    // 编辑
    // Object.assign(coachData, row)
    coachData.name = row.name
    coachData.age = row.age
    coachData.avatar = row.avatar
    coachData.address = row.address
    coachData.schedule = row.schedule
    coachData.phone = row.phone
    coachData.salary = row.salary
    coachData.desc = row.desc
    coachData.scope = row.scope
  }
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
}

// 上传头像
const handlerAvatarSuccess = async (res) => {
  coachData.avatar = res.data
}

// 添加教练
const addCoach = async () => {
  coachData.schedule.start = value1.value[0]
  coachData.schedule.end = value1.value[1]
  const res: any = await addCoachAPI(coachData)
  if (res.code === 0) {
    dialogVisible.value = false
    await coachStore.getCoachList()
    ElMessage({
      type: 'success',
      message: res.message
    })
  }
}

// 编辑教练
const editCoach = async () => {
  dialogVisible.value = true
  const res: any = await putCoachAPI(id.value, coachData)
  if (res.code === 0) {
    dialogVisible.value = false
    await coachStore.getCoachList()
    ElMessage({
      type: 'success',
      message: res.message
    })
  }
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="添加教练">
    <el-form
      :model="coachData"
      status-icon
      class="demo-ruleForm row"
      ref="formRef"
    >
      <div>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="coachData.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="coachData.age" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="coachData.phone" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="薪资" prop="salary">
          <el-input v-model.number="coachData.salary" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="评分" prop="scope">
          <el-input v-model.number="coachData.scope" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上传头像">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :on-success="handlerAvatarSuccess"
            :action="upload_coach_avatar_url"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </div>
      <div style="margin-left: 20px" class="date-select-div">
        <el-form-item label="地址" prop="address">
          <el-input v-model="coachData.address" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="排班" prop="schedule">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            start-placeholder="起始"
            end-placeholder="结束"
          />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input
            v-model="coachData.desc"
            resize="none"
            type="textarea"
            :rows="4"
            placeholder="来一段自我描述吧..."
          />
        </el-form-item>
        <el-button class="confirm-btn1" type="primary" @click="handleCancel">取消</el-button>
        <el-button v-if="type === 1" class="confirm-btn2" type="primary" @click="addCoach">确定</el-button>
        <el-button v-else class="confirm-btn2" type="primary" @click="editCoach">确定</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.date-select-div {
  position: relative;

  .confirm-btn1 {
    position: absolute;
    bottom: 10px;
    right: 110px;
    width: 100px;
  }

  .confirm-btn2 {
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 100px;
  }
}
</style>
